<template>
    <div class="container">
        <div class="swiper-box">
            <swiper :options="swiperOption"  ref="mySwiper" >
                <!-- slides -->
                <swiper-slide
                    v-for="(item,index) in swiperList" :key="index"
                >
                    <a>
                        <img :src="item.img" alt="">
                    </a>
                </swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination"  slot="pagination"></div>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
        </div>
    </div>
    
</template>

<script>
import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import { autoplay } from 'swiper'
import {Data} from '../../assets/js/request'
export default {
    name:"Swiper",
    components:{
        "swiper":Swiper,
        "swiper-slide":SwiperSlide
    },
    data(){
        return {
            swiperOption:{
                autoplay:true,
                loop:true,
                effect:'cube',
                cubeEffect:{
                    slideShadows: true,
                    shadow:true,
                    shadowOffset: 100,
                    shadowScale: 0.6
                },
                pagination: {
                    el: '.swiper-pagination',
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            },
            swiperList:[],
            goodStatus:false,
        }
    },
    methods:{

    },
    async created(){
        //获取轮播图
        let res = await Data('get','swiper',{project_id:41})
        res.rows.map(ele => {
            // console.log(ele.s_photos[0]);
            return this.swiperList.push({img:ele.s_photos[0].path})
        })            
    }
}
</script>

<style lang="scss" scoped>
@import '../../assets/css/base.scss';
.swiper-box{
    // width: 1226px;
    // margin-left: auto;
    // margin-right: auto;
    position: relative;
    .mune_content{
        width:264px;
        height:445px;
        background-color: rgba(105,101,101,.6);
        position: absolute;
        z-index: 2;
        opacity: .8;
        padding-top: 6px;
        .mune_item{
            height: 64px;
            line-height: 66px;
            font-size: 12px;
            cursor: pointer;
            padding: 0 24px;
            position: relative;
            a{
                display: flex;
                color: #fff;
                padding: 0 8px;
                height: 63px;
                font-size:16px;
                justify-content: space-between;
                .icon{
                    text-align: right;
                }
            }
        }
    }
    .sub_menu{
        border:1px solid #d9dde1;
        background:#fff;
        position: absolute;
        left: 244px;
        top: 0px;
        width: 730px;
        height: 450px;
        z-index: 581;
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
        .sub_inner_box{
            width: 652px;
            margin-left: 40px;
            overflow: hidden;
            margin-top: 30px;
            a{
                width: 50px;
                height: 50px;
                display: flex;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .swiper-container{
        height: 451px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    // .swiper-button-prev{
    //     left: 270px;
    // }

}


</style>